<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 19:00:58
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-07-26 20:52:56
 * @Description: 个人中心
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css      ">
    <title>个人中心</title>
</head>

<body>
    <div class="user-header">
        <div class="card">
            <div class="avator">
                <img src="../img/user/avator.png" alt="">
            </div>
            <div class="user-name">减息</div>
            <div class="text">
                <div class="star">
                    <div class="num">15</div>
                    <div class="title">我的收藏</div>
                </div>
                <div class="brand">
                    <div class="num">31</div>
                    <div class="title">关注品牌</div>
                </div>

            </div>
        </div>
    </div>

    <div class="modular">
        <div class="headline">
            <span>我的订单</span>
            <a href="#">全部订单<i class="fa fa-angle-right" aria-hidden="true"></i></a>
        </div>
        <div class="content-list">
            <a href="#"><img src="../img/user-center/待付款.png" alt=""><span>待付款</span></a>
            <a href="#"><img src="../img/user-center/待发货1.png" alt=""><span>代发货</span></a>
            <a href="#"><img src="../img/user-center/待收货1.png" alt=""><span>待收货</span></a>
            <a href="#"><img src="../img/user-center/待评价 .png" alt=""><span>待评价</span></a>
            <a href="#"><img src="../img/user-center/售后.png" alt=""><span>售后</span></a>
        </div>
    </div>

    <div class="modular">
        <div class="headline">我的资产</div>
        <div class="content-list">
            <a href="#"><img src="../img/user-center/优惠券.png" alt=""><span>优惠卷</span></a>
            <a href="#"><img src="../img/user-center/钱包.png" alt=""><span>钱包</span></a>
            <a href="#"><img src="../img/user-center/美元.png" alt=""><span>D币</span></a>
            <a href="#"><img src="../img/user-center/红包.png" alt=""><span>红包</span></a>
        </div>
    </div>

    <div class="modular">
        <div class="headline">工具</div>
        <div id="tools-list" class="content-list">
            <a href="#"><img src="../img/user-center/会员中心1.png" alt=""><span>会员中心</span></a>
            <a href="#"><img src="../img/user-center/收货地址.png" alt=""><span>收货地址</span></a>
            <a href="#"><img src="../img/user-center/客服1.png" alt=""><span>售后&客服</span></a>
            <a href="#"><img src="../img/user-center/T设置.png" alt=""><span>设置</span></a>
            <a href="#"><img src="../img/user-center/商家入驻.png" alt=""><span>入住合作</span></a>
            <a href="#"><img src="../img/user-center/反馈.png" alt=""><span>反馈&投诉</span></a>
            <a href="#"><img src="../img/user-center/报告.png" alt=""><span>商品报告</span></a>
            <a href="#"><img src="../img/user-center/关于我们.png" alt=""><span>关于我们</span></a>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="#">
            <img src="../img/user-center/首页2.png" alt="">
            <span>首页</span>
        </a>
        <a href="#">
            <img src="../img/user-center/钻石 (1).png" alt="">
            <span>优选</span>
        </a>
        <a href="#">
            <img src="../img/user-center/分类2.png" alt="">
            <span>分类</span>
        </a>
        <a href="#">
            <img src="../img/user-center/购物车2.png" alt="">
            <span>购物车</span>
        </a>
        <a class="active" href="#">
            <img src="../img/user-center/我的2.png" alt="">
            <span>我的</span>
        </a>
    </nav>

</body>


<style>
    body {
        background-color: #f0f0f0;
    }
    
    .user-header {
        width: 100%;
        height: 62.13vw;
        background: url('../img/user/bg.png') top center no-repeat;
        background-size: 100% 100%;
        position: relative;
    }
    
    .user-header .card {
        position: absolute;
        bottom: 2.93vw;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        width: 92vw;
        height: 32.27vw;
        background-color: #ffffff;
        box-shadow: 0vw 0.67vw 2.48vw 0.19vw rgba(13, 4, 9, 0.09);
    }
    
    .user-header .card .avator {
        width: 17.07vw;
        height: 17.07vw;
        background-color: #e8e8e8;
        box-shadow: 0vw 0.27vw 0.92vw 0.01vw rgba(0, 0, 0, 0.08);
        border: solid 0.4vw #ffffff;
        margin: 0 auto;
        margin-top: -12vw;
        border-radius: 50%;
    }
    
    .user-header .card .avator img {
        height: 100%;
        width: 100%;
    }
    
    .card .user-name {
        font-size: 4.53vw;
        line-height: 4.53vw;
        margin-top: 3.2vw;
        letter-spacing: 0.23vw;
        color: #333333;
    }
    
    .card .text {
        display: flex;
        justify-content: space-around;
        margin-top: 4.67vw;
        font-size: 3.73vw;
        line-height: 3.73vw;
        letter-spacing: 0vw;
        color: #333333;
    }
    
    .card .text .title {
        line-height: 8vw;
    }
    /* 我的订单 */
    
    .modular {
        margin-bottom: 2.27vw;
        background: #fff;
    }
    
    .headline {
        height: 12.53vw;
        border-bottom: 0.13vw solid #eaeaea;
        font-size: 3.73vw;
        line-height: 12.53vw;
        letter-spacing: 0vw;
        color: #333333;
        padding: 0 3.6vw;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }
    
    .content-list {
        padding: 6vw 3.6vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    
    .content-list>a {
        width: calc(100% / 5);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3vw;
    }
    
    #tools-list>a {
        width: calc(100% / 4);
        margin-bottom: 4vw;
    }
    
    .content-list>a>img {
        height: 5.2vw;
        width: auto;
    }
</style>

</html>